<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8" />
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
    <title></title>
</head>

<body>
<form id="uploadForm" enctype="multipart/form-data">
    文件: <input id="file" type="file" name="file" />
</form>
<button id="upload">上传文件</button>
</body>
<script type="text/javascript">
    $(function() {
        $("#upload").click(function() {
            var getPresignedUrl =
                "http://localhost:88/api/ware/minio/getSign?bucketName=images&objectName="+$('#file')[0].files[0].name;

            // todo 先获取上传的签名的url
            $.ajax({
                type: "get",
                url: getPresignedUrl, //上传文件的请求路径必须是绝对路劲
                data: {},
            })
                .success(function(response) {
                    console.log(response);
                    if (response.code === 0) {
                        var uploadPutUrl = response.data;
                        console.log(uploadPutUrl);
                        // todo 通过签名的url上传文件
                        $.ajax({
                            type: "put",
                            url: uploadPutUrl, //上传文件的请求路径必须是绝对路劲
                            data: $('#file')[0].files[0], //直接上传文件对象
                            cache: false,
                            processData: false, //因为data值是FormData对象，不需要对数据做处理。
                            contentType: false, //因为是由<form>表单构造的FormData对象，所以这里设置为false。
                        })
                            .success(function(response) {
                                // success 即成功
                                console.log(response);
                            })
                            .error(function() {
                                // error 即失败
                                alert("上传失败");
                            });
                    } else {
                        alert("失败");
                    }
                })
                .error(function() {
                    alert("失败");
                });
        });
    });
</script>

</html>